<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="This is a coupon website">
    <link rel="shortcut icon" href="./imgs/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/vue@2.js"></script>
    <title>Coupon</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
    <div id="app">
        <div class="header">
            <div class="header-content">
                <div class="header-content-normal">
                    <div class="header-content-search" @click="handleToSearch"></div>
                    <span class="header-content-normal_title">Coupon</span>
                    <div class="header-content-menu" @click="showMenu = true"></div>
                </div>
                <div class="nav" :class="{open: showMenu}">
                    <a class="nav-item active" href="javascript:;"><span>Home</span></a>
                    <a class="nav-item" :href="`type.html?type=${encodeURIComponent(item)}`" v-for="item in categories">
                        <span>{{item}}</span>
                    </a>
                </div>
                <div class="nav-mask" v-show="showMenu" @click="showMenu = false"></div>
            </div>

            <div class="search">
                <input class="search_input" type="text" v-model="keywords" placeholder="Search ...">
                <div class="search-btn" @click="handleToSearch">
                <img class="search-btn_img" src="./imgs/icon-search.png" alt="search_icon" width="20">
                </div>
            </div>
        </div>
        <div class="banner">
            <img src="./imgs/banner.jpg" alt="banner" >
        </div>
        <div class="main">
            <ul class="cards" v-cloak>
                <li v-for="item in filterCoupons">
                    <div class="card">
                        <div class="card-top">
                            <div class="card-img">
                                <img :src="item.icon" :alt="item.title" width="140">
                            </div>
                            <div class="card-info">
                                <span class="card-info-title">{{item.title}}</span>
                                <span class="card-info-desc">{{item.descInfo}}</span>
                                <span class="card-info-tips">{{item.created}}</span>
                            </div>
                        </div>
                        <div class="card-bottom">
                            <span class="card-name">{{item.couponTypeName}}</span>
                            <a class="card-btn" :href="handleToDetail(item)">Get Deal</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="footer-nav">
                <a href="./cookies-policy.html">Cookies Policy</a>
                <a href="./privacy-policy.html">Privacy Policy</a>
                <a href="javascript:;">We updated our Terms of Service on Aug 4, 2023.</a>
                <a href="javascript:;">©2023 Clutch.co. All rights reserved.</a>
            </div>
        </div>
    </div>
</body>
<script>
    var vm  = new Vue({
        el: '#app',
        data() {
            return {
                couponList: [],
                categories: {
                    1: 'Electronics',
                    2: 'Auto Insurance',
                    3: 'Apparel&Shoes',
                    4: 'Beauty Makeup',
                    5: 'Toys Games'
                },
                showMenu: false,
                keywords: '',
                newMock: [
                    {
                        typeName: "Auto \x26 Insurance",
                        title: "Unlock 15% discount on your first Kizik order",
                        icon: "https://www.discounterbar.com/content/uploads/images/logo_64525a3a778d6.png",
                        descInfo: "You can get a 15% off discount on your first Kizik order by signing up for the email newsletter.?The discount code is valid for new customers and is limited time pricing.",
                        couponUrl: "https://kizik.com/",
                        status: 1
                    },
                    {
                        typeName: "Auto \x26 Insurance",
                        title: "20% Off Discounts",
                        icon: "https://www.discounterbar.com/content/uploads/images/logo_653c69be5cd49.png",
                        descInfo: "Enjoy exclusive coupons and discounts: save more on you next purchase! Check here for verified Silverwood deals to save more than 15% off.",
                        couponUrl: "https://www.silverwoodthemepark.com/",
                        status: 1
                    },
                    {
                        typeName: "Auto \x26 Insurance",
                        title: "Save 10% on your purchase",
                        icon: "https://www.discounterbar.com/content/uploads/images/logo_64573a44dafb6.jpeg",
                        descInfo: "Save 10% off on your purchase. Here are our top Brecks discount codes and deals for customers.",
                        couponUrl: "https://www.brecks.com/",
                        status: 1
                    },
                    {
                        typeName: "Apparel\x26Shoes",
                        title: "Black Friday Big Discounts",
                        icon: "https://www.discounterbar.com/content/uploads/images/logo_6458aabc8e5c5.png",
                        descInfo: "Save more with this verified deals. Click on the \u201cGet Deal\u201d Button to get special offers.",
                        couponUrl: "https://www.unoallavolta.com/active-offers",
                        status: 1
                    }
                ]
            }
        },
        computed: {
            filterCoupons() {
                return this.couponList.filter(coupon => coupon.status == 1)
            },
            typeMap() {
                const result = []
                this.couponList.forEach(item => {
                    
                })
            }
        },
        created() {
            this.getCouponList()
        },
        mounted() {

        },
        methods: {
            handleToSearch() {
                window.location.href = `search.html?keywords=${this.keywords}`
            },
            handleToDetail(coupon) {
                return `detail.html?data=${encodeURIComponent(JSON.stringify(coupon))}`
            },
            getCouponList() {
                this.loading = true
                fetch('https://api.92onegame.com/bibleApi/coupon/findCouponList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        limit:30,
                        page: 1
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        res.data.unshift(...this.newMock)
                        this.couponList = res.data
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            }
        }
    })
</script>
</html>